<template>
  <div class="viewGroup" :style="{
      width:Math.round(item.cptWidth)+'px',
      height:Math.round(item.cptHeight)+'px',
      top:Math.round(item.cptY)+'px',
      left:Math.round(item.cptX)+'px',
      transform: 'rotate('+item.cptRotate+'deg)',
      zIndex: length-(index+1)
    }" >
    <div style="width: 100%;height: 100%; position: relative" >
      <div :style="{
        transform: `scaleX(${item.scaleX}) scaleY(${item.scaleY})`,
         width: `${item.originWidth}px`,
         height: `${item.originHeight}px`,
         transformOrigin: '0px 0px'}"
      >
        <div v-for="(groupItem, gIndex) in item.groupList" :key="groupItem.id" :style="{
          position: 'absolute',
          width:Math.round(groupItem.cptWidth)+'px',
          height:Math.round(groupItem.cptHeight)+'px',
          top:Math.round(groupItem.cptY)+'px',
          left:Math.round(groupItem.cptX)+'px',
          transform: 'rotate('+ groupItem.cptRotate +'deg)',
          zIndex: item.groupList.length - gIndex - 1
        }">
            <component
                :is="groupItem.cptKey"
                :width="Math.round(groupItem.cptWidth)"
                :height="Math.round(groupItem.cptHeight)"
                :option="groupItem.cptOption"
                :value="groupItem.cptOption"
            >
            </component>
          </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'viewGroup',
  cnName: 'viewGroup',
  props: {
    item: Object,
    length: Number,
    index: Number
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.viewGroup {
  position: absolute;

}
</style>
